<template>
    <div class="box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="佐敦荟商场" name="first">
            <zdhMall></zdhMall>
          </el-tab-pane>
          <el-tab-pane label="声乐大厦" name="second">
            <syBuilding></syBuilding>
          </el-tab-pane>
          <el-tab-pane label="旺角新之城" name="third">
            <wjCity></wjCity>
          </el-tab-pane>
          <el-tab-pane label="青衣灏景湾" name="fourth">
            <qyhjBend></qyhjBend>
          </el-tab-pane>
          <el-tab-pane label="大埔墟幸汇" name="fifth">
            <dbxxCollection></dbxxCollection>
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import zdhMall from './components/zdhMall.vue'
    import wjCity from './components/wjCity.vue'
    import syBuilding from './components/syBuilding.vue'
    import qyhjBend from './components/qyhjBend.vue'
    import dbxxCollection from './components/dbxxCollection.vue'
    import SyBuilding from './components/syBuilding.vue'
    export default {
      components: {
        zdhMall,
        wjCity,
        syBuilding,
        qyhjBend,
        dbxxCollection,
        SyBuilding
      },
        data() {
            return {
                activeName: 'first',
                elTabList: [
                    {
                        label: '佐敦荟商场',
                        name: 'first',
                    },
                    {
                        label: '声乐大厦',
                        name: 'second',
                    },
                    {
                        label: '旺角新之城',
                        name: 'third',
                    },
                    {
                        label: '青衣灏景湾',
                        name: 'fourth',
                    },
                    {
                        label: '大埔墟幸汇',
                        name: 'fifth',
                    },
                ],
            }
        },
    }
</script>

<style lang="scss" scoped>
    .box {
        height: 40px;
        background-color: #0c2e64;
        border-radius: 5px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      background-color: #0c2e64;
    }
    ::v-deep .el-tabs__header {
      margin: 0 0 0 30px;
    }
    ::v-deep .el-tabs__nav {
      margin-left: 10px;
    }
    ::v-deep .el-tabs__item is-top is-active{
      color: #06b1f9
    }
</style>
